<template>
    <div class="student-container">
        <div>
            <el-form :inline="true" :model="params.params" class="demo-form-inline" ref="form">
                <el-form-item label="姓名">
                    <el-input v-model="params.params.trueName" placeholder="请输入学号" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getDataSource">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table style="width: 100%" v-loading="loading" :data="dataSource">
            <el-table-column prop="collegeName" label="院系" width="180" />
            <el-table-column prop="majorName" label="专业" width="180" />
            <el-table-column prop="level" label="等级" width="140" />

            <el-table-column prop="academicYear" label="学年" width="100" />
            <el-table-column prop="trueName" label="姓名" width="100" />
            <el-table-column prop="attachmentPath" label="附件" width="140px">
                <template #default="scope">
                    <span>
                        <el-link v-if="scope.row.attachmentPath" type="primary"
                            :href="scope.row.attachmentPath">点击查看</el-link>
                        <el-link v-else type="warning">无文件</el-link>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="articleTotal" lang="论文数量" />
            <el-table-column prop="articleTotal" lang="论文积分" />
            <el-table-column prop="raceTotal" lang="竞赛获奖数量" />
            <el-table-column prop="articleTotal" lang="竞赛获奖积分" />
            <el-table-column prop="status" label="状态" />
            <el-table-column prop="desc" label="申请理由" width="100" />
            <el-table-column prop="createTime" label="申请时间" />
            <el-table-column prop="reason" label="原因" />
            <el-table-column label="操作" width="250px">
                <template #default="scope">
                    <el-button type="warning" v-if="scope.row.status === '初审中'" @click="passRow(scope.row)"
                        size="small">初审通过</el-button>
                    <el-button type="warning" v-else-if="scope.row.status === '复审中'" @click="passReRow(scope.row)"
                        size="small">复审通过</el-button>
                    <el-button type="danger" v-if="scope.row.status != '审核失败' && scope.row.status != '通过'"
                        @click="failureRow(scope.row)" size="small">不通过</el-button>
                    <el-button @click="showDetail(scope.row)" size="small">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin:10px 0" @current-change="currentChange" background layout="prev, pager, next"
            :total="params.total" />
        <el-dialog v-model="dialogVisible" title="审核" width="40%" :before-close="handleClose">
            <el-form :model="formModel" class="demo-form-inline" label-width="100px">
                <el-form-item label="原因">
                    <el-input v-model="formModel.reason" placeholder="请输入原因" clearable />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitFailure">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogVisible1" title="复审核" width="40%" :before-close="handleClose">
            <el-form :model="formModel1" class="demo-form-inline" label-width="100px">
                <el-form-item label="等级">
                    <el-select v-model="formModel1.level" placeholder="请输入等级" clearable>
                        <el-option label="国家级奖学金" value="国家级奖学金"></el-option>
                        <el-option label="学校奖学金" value="学校奖学金"></el-option>
                        <el-option label="其它奖学金" value="其它奖学金"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible1 = false">取消</el-button>
                    <el-button type="primary" @click="submitRe">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="detailVisible" title="详情" width="60%">
            <el-descriptions :column="4" border>
                <template v-for="(item, index) in detail.articles" :key="'art_'+index">
                    <el-descriptions-item label="论文名称">{{ item.name }}</el-descriptions-item>
                    <el-descriptions-item label="论文级别">{{ item.level }}</el-descriptions-item>
                    <el-descriptions-item label="附件">
                        <el-link type="primary" v-if="item.attachement" :href="item.attachement">查看</el-link>
                        <span v-else>暂无附件</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="积分">{{ item.score }}</el-descriptions-item>
                </template>
                <template v-for="(item, index) in detail.races" :key="'art_'+index">
                    <el-descriptions-item label="竞赛名称">{{ item.name }}</el-descriptions-item>
                    <el-descriptions-item label="奖项级别">{{ item.level }}</el-descriptions-item>
                    <el-descriptions-item label="附件">
                        <el-link type="primary" v-if="item.attachement" :href="item.attachement">查看</el-link>
                        <span v-else>暂无附件</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="积分">{{ item.score }}</el-descriptions-item>
                </template>
            </el-descriptions>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="detailVisible = false">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import request from '@/utils/http';
import { ref, onMounted } from 'vue'
import { toRaw } from '@vue/reactivity';
import { ElMessage } from 'element-plus'
export default {
    name: "MScholarship",
    setup() {
        const form = ref(null)
        onMounted(() => {
            console.log(form);
        })
    },
    data() {
        return {
            dataSource: [],
            params: {
                trueName: '',
                level: '',
                status: '',
                pageNum: 1,
                total: 0,
                params: {
                }
            },
            loading: false,
            dialogVisible: false,
            dialogVisible1: false,
            detailVisible: false,
            formModel: {},
            formModel1: {},
            majorOptions: [],
            collegeOptions: [],
            detail: {}
        }
    },
    methods: {
        showDetail(row) {
            let id = toRaw(row).scholarshipId;
            request.get("/sscholarship/" + id)
                .then((response) => {
                    this.detail.articles = JSON.parse(response.data.articles)
                    this.detail.races = JSON.parse(response.data.races)
                    this.detailVisible = true
                })
        },
        submitFailure() {

        },
        passReRow(row) {
            this.formModel1.scholarshipId = toRaw(row).scholarshipId;
            this.dialogVisible1 = true
        },
        passRow(row) {
            let id = toRaw(row).scholarshipId;
            request.post("/mscholarship/pass/" + id)
                .then(response => {
                    if (response.code === 200) {
                        ElMessage({
                            message: '操作成功',
                            grouping: true,
                            type: 'success',
                        })
                        this.getDataSource()
                    }
                })
        },
        submitRe() {
            request.post("/mscholarship/repass/" + this.formModel1.scholarshipId, this.formModel1)
                .then(response => {
                    if (response.code === 200) {
                        ElMessage({
                            message: '操作成功',
                            grouping: true,
                            type: 'success',
                        })
                        this.dialogVisible1 = false
                        this.getDataSource()
                    }
                })
        },
        failureRow(row) {
            let id = toRaw(row).scholarshipId;
            this.formModel.scholarshipId = id
            this.dialogVisible = true

        },
        submitFailure() {
            request.post("/mscholarship/failure/" + this.formModel.scholarshipId, this.formModel)
                .then(response => {
                    if (response.code === 200) {
                        this.dialogVisible = false
                        ElMessage({
                            message: '操作成功',
                            grouping: true,
                            type: 'success',
                        })
                        this.getDataSource()
                    }
                })
        },
        resetPageParams() {
            this.params.pageNum = 1
        },
        reset() {
            this.params.params = {}
        },
        handleClose() {
            this.formModel = {}
        },
        getDataSource() {
            this.loading = true
            request.post("/mscholarship/list", this.params)
                .then(response => {
                    if (response.code === 200) {
                        let data = response.data
                        this.dataSource = data.list
                        this.params.total = data.total
                    }
                }).finally(() => {
                    this.loading = false
                })
        },
        currentChange(value) {
            this.params.pageNum = value
            this.getDataSource()
        }
    },
    created() {
        this.getDataSource()
    }

}
</script>

<style>
.tool {
    margin: 10px 0
}
</style>